<header class="top-header clearfix">

    <!-- Logo -->
    <div class="logo"
         ng-class="{ 'bg-dark': ['11','31'].indexOf(admin.skin) >= 0,
                     'bg-white': admin.skin === '21',
                     'bg-primary': ['12','22','32'].indexOf(admin.skin) >= 0,
                     'bg-success': ['13','23','33'].indexOf(admin.skin) >= 0,
                     'bg-info-alt': ['14','24','34'].indexOf(admin.skin) >= 0,
                     'bg-warning': ['15','25','35'].indexOf(admin.skin) >= 0,
                     'bg-danger': ['16','26','36'].indexOf(admin.skin) >= 0,
                    }">
        <a href="#/">
            <span>{{main.brand}}</span>
        </a>
    </div>    

    <!-- needs to be put after logo to make it work -->
    <div class="menu-button" toggle-off-canvas ng-controller="sesionUsuario">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </div>


    <div class="top-nav">

        <ul class="nav-left list-unstyled">
            <li>
                <a href="#/" data-toggle-nav-collapsed-min
                             class="toggle-min"
                             ><i class="ti-menu"></i></a>
            </li>
        </ul> 

        <ul class="nav-right pull-right list-unstyled">

            <li class="dropdown text-normal nav-profile">
                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                    <span>{{main.usuario}}</span>
                    <!--img src="images/g1.jpg" alt="" class="img-circle img30_30">
                    <span class="hidden-xs">
                        <span data-i18n="Lisa Doe"></span>
                    </span-->
                </a>
                <ul class="dropdown-menu with-arrow pull-right">
                    <li>
                        <a href="#/pages/profile">
                             <i class="ti-user"></i>
                            <span data-i18n="My Profile"></span>
                        </a>
                    </li>
                    <li>
                        <!--a href="#/pages/signin" ng-controller="sesionUsuario" ng-click=salir()-->
                        <a href="" ng-controller="sesionUsuario" ng-click=salir()>
                            <i class="ti-export"></i>
                            <span data-i18n="Log Out"></span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="dropdown langs text-normal" data-ng-controller="LangCtrl">
                <a href="javascript:;" class="dropdown-toggle active-flag" data-toggle="dropdown">
                    <div class="flag {{ getFlag() }}"></div>
                </a>
                <ul class="dropdown-menu with-arrow  pull-right list-langs" role="menu">
                    <li data-ng-show="lang !== 'English' ">
                        <a href="javascript:;" data-ng-click="setLang('English')"><div class="flag flags-american"></div> English</a></li>
                    <li data-ng-show="lang !== 'Español' ">
                        <a href="javascript:;" data-ng-click="setLang('Español')"><div class="flag flags-spain"></div> Español</a></li>
                    <li data-ng-show="lang !== '日本語' ">
                        <a href="javascript:;" data-ng-click="setLang('日本語')"><div class="flag flags-japan"></div> 日本語</a></li>
                    <li data-ng-show="lang !== '中文' ">
                        <a href="javascript:;" data-ng-click="setLang('中文')"><div class="flag flags-china"></div> 中文</a></li>
                    <li data-ng-show="lang !== 'Deutsch' ">
                        <a href="javascript:;" data-ng-click="setLang('Deutsch')"><div class="flag flags-germany"></div> Deutsch</a></li>
                    <li data-ng-show="lang !== 'français' ">
                        <a href="javascript:;" data-ng-click="setLang('français')"><div class="flag flags-france"></div> français</a></li>
                    <li data-ng-show="lang !== 'Italiano' ">
                        <a href="javascript:;" data-ng-click="setLang('Italiano')"><div class="flag flags-italy"></div> Italiano</a></li>
                    <li data-ng-show="lang !== 'Portugal' ">
                        <a href="javascript:;" data-ng-click="setLang('Portugal')"><div class="flag flags-portugal"></div> Portugal</a></li>
                    <li data-ng-show="lang !== 'Русский язык' ">
                        <a href="javascript:;" data-ng-click="setLang('Русский язык')"><div class="flag flags-russia"></div> Русский язык</a></li>
                    <li data-ng-show="lang !== '한국어' ">
                        <a href="javascript:;" data-ng-click="setLang('한국어')"><div class="flag flags-korea"></div> 한국어</a></li>
                </ul>
            </li>
        </ul>
    </div>

</header>
